<template>
  <view @click="searchClick" class="search" :style="{ backgroundColor: bgc}">
    <view class="content" :style="{ borderRadius: `${radius}px` }">
      <uni-icons class="myicon" type="search" size="18"></uni-icons>
      搜索
    </view>
  </view>
</template>

<script>
  export default {
    name: "my-search",
    data() {
      return {};
    },
    // 接收两个参数：圆角 & 背景颜色
    props: {
      radius: {
        type: Number,
        default: 20
      },
      bgc: {
        type: String,
        default: '#c00000'
      }
    },
    methods: {
      // 点击搜索组件的搜索框时会触发
      searchClick () {
        // 这个点击事件会触发父组件中的事件
        this.$emit('click') // this.$emit() 触发父组件传入的事件
      }
    }
  }
</script>

<style lang="scss">
  .search {
    // 吸顶定位
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
    padding: 20rpx;
    // background-color: #c00000;

    .content {
      background-color: #fff;
      height: 60rpx;
      // border-radius: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;

      .myicon {
        margin-right: 10rpx;
      }
    }
  }
</style>
